<template>
  <div class="hello">
    <div class="header">固定高度</div>
    <div class="header_body wrapper" ref='wrapper'>
            <div class="content">
                <input type="text" v-model="item.vModelData" v-for="(item,index) in dataArr"  :key='index'>
            </div>
    </div>
  </div>
</template>

<script>
// import BScroll from 'better-scroll'
import BScroll from 'better-scroll'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  data(){
    return {
      dataArr:[{vModelData:""},{vModelData:""},{vModelData:""},{vModelData:""},{vModelData:""},{vModelData:""},{vModelData:""},{vModelData:""}],
      scroll: null
    }
  },
  mounted() {
   this.$nextTick(() => {
    this.scroll = new BScroll(this.$refs.wrapper, {
     
    })
    console.log(this.scroll)
    this.scroll.refresh()
   })


  //   this.bs = new BScroll('.body1', {
  //     // ...
  //     pullUpLoad: true,
  //     wheel: true,
  //     scrollbar: true,
  //     // and so on
  //   })
  //   console.log(this.bs)
  // }
}
}
</script>

<style scoped>
.hello{
  height:100%;
  width:100%;
  overflow: hidden;
  box-sizing: border-box;
  /* border:1px solid red; */
  display: flex;
  flex-direction: column;
}
.header{
width:100%;
height:300px;
border:1px solid red;
line-height: 300px;
text-align: center;
}

.header_body{
  flex:1;
  height:100%;
  width:100%;
  border:1px solid red;
  overflow:hidden;
}

.body_main{
  height:100%;
  width:100%;
  overflow: scroll;
}
input{
 margin:50px 10px;
 padding:5px;
 border:1px solid #000;
}
</style>
